<script setup lang="ts">
import {reactive, ref, watch, onMounted, nextTick, onActivated} from "vue";
import {executeRest} from "@/views/api/elastic.ts"
import {error} from "@/utils/message.ts";
import {useRoute} from "vue-router"
import {useSiteStore} from "@/store/modules/site.ts"
import {History} from "@/views/types/history.ts";
import RestHistory from "@/views/components/RestHistory.vue";
import JsonText from "@/components/JsonText.vue";
const route=useRoute();
const isRecord = ref(true);
const drawer = ref(false);
const loading = ref(false);
const result = reactive({});
const histories = reactive<Array<History>>([]);
const form = reactive({
  url: "/index/_search",
  method: "post",
  body: "",
})
watch(form, () => {
  isRecord.value = true;
}, {deep: true});

const formatBody = () => {
  try {
    let body = JSON.stringify(JSON.parse(form.body), null, 2)
    form.body = body;
  } catch (e) {
    console.log(e)
    error(e);
  }
}
const execute = () => {
  Object.keys(result).forEach(key => {
    delete result[key];
  })
  loading.value = true;
  executeRest(form.method, form.url, form.body).then(res => {
    Object.assign(result, res);
    insertHistory();
  }).catch((err) => {
    error(err.message);
    if (err?.response?.data) {
      Object.assign(result, err?.response?.data);
    }
  }).finally(() => {
    loading.value = false;
  })
}
const insertHistory = () => {
  if (isRecord.value) {
    window.api.history.insert(({
      siteId: useSiteStore()._id,
      method: form.method,
      url: form.url,
      body: form.body,
      time: new Date().getTime()
    })).then(res => {
      isRecord.value = false;
      histories.splice(0, 0, res);
    })
  }
}
const onSelectHistory = (row: History) => {
  form.method = row.method;
  form.body = row.body;
  form.url = row.url;
  nextTick(() => {
    isRecord.value = false;
    drawer.value = false;
  })
}
const onDeleteHistory = (id) => {
  let index = histories.findIndex(data => data._id === id);
  if (index > -1) {
    histories.splice(index, 1);
  }
}
onMounted(() => {
  window.api.history.getList(useSiteStore()._id).then(res => {
    if (res && res.length > 0) {
      histories.push(...res);
    }
  })
})
onActivated(()=>{
  let query = route.query;
  if(query && query.url){
    form.url=<string>query.url;
    Object.keys(result).forEach(key => {
      delete result[key];
    })
  }
  if(query && query.body){
    form.body=<string>query.body;
  }
  if(query && query.method){
    form.method=<string>query.method;
  }
})
</script>

<template>
  <div class="container">
    <el-drawer v-model="drawer" size="35%" title="历史记录">
      <RestHistory v-model:list="histories" @success="onSelectHistory" @on-delete="onDeleteHistory" @cancel="drawer=false"></RestHistory>
    </el-drawer>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-form ref="formRef" :model="form" label-width="5px">
          <el-row>
            <el-col :span="24">
              <el-form-item prop="url">
                <el-input size="medium" v-model="form.url" placeholder="/index/_search" clearable>
                  <template #prepend>
                    <el-select size="medium" v-model="form.method" style="width: 100px">
                      <el-option value="post" label="POST"></el-option>
                      <el-option value="get" label="GET"></el-option>
                      <el-option value="put" label="PUT"></el-option>
                      <el-option value="delete" label="DELETE"></el-option>
                    </el-select>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="body">
                <el-input v-model="form.body" type="textarea" :rows="30" spellcheck="false"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="display: flex;justify-content: space-between">
          <div>
            <el-button text @click="drawer=true">历史记录</el-button>
          </div>
          <div>
            <el-button type="primary" :disabled="!form.body"  @click="formatBody">格式化</el-button>
            <el-button type="primary" :disabled="!form.url" :loading="loading" @click="execute">执行</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div v-loading="loading" style="height: calc(100vh - 130px);padding: 2px;border: solid 1px var(--el-border-color)">
          <JsonText :value="result"></JsonText>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>

</style>